<template>
  <view class="container">
    <view class="tabbar">
      <view class="item" :class="{ active: !tabIndex }" @tap="switchTab(0)">当前订单</view>
    </view>
    <swiper :current="tabIndex" :duration="300" class="swiper" :show-scrollbar="false">
      <swiper-item @touchmove.stop="handleSwiperItemChange">
        <view class="no-order-content" v-if="!orders.length">
          <image src="../../static/icon-img/empty.png"></image>
          <view class="tips">
            <view>您今天还没有下单</view>
            <view>快去选择一杯喜欢的饮品吧</view>
          </view>
          <button @tap="zlyd()" type="primary" class="font-size-lg" hover-class="none">
            去下单
          </button>
        </view>
        <scroll-view scroll-y="true" v-else class="orders-scroll1" @scrolltolower="handleScroll">
          <view class="wrapper">
            <view class="order-list">
              <view class="order" v-for="(order, index) in orders" :key="index">
                <view class="header">
                  <view class="flex-fill font-size-medium">{{ order.orderId }}</view>
                  <view class="status">
                    <view v-if="order.status == 1" @click="jump_detail(order.id)">
                      已下单
                    </view>
                    <view v-else-if="order.status == 2"> 已完成 </view>
                    <image @click="jump_detail(order.id)" src="/static/images/common/black_arrow_right.png"></image>
                  </view>
                </view>
                <navigator open-type="navigate" :url="'/pages/order/detail?id=' + order.id">
                  <view class="images" v-if="order.list.length == 0">
                    <image :src="order.productImage"></image>
                    <view class="good_name">{{ order.productName }}</view>
                  </view>

                  <view class="images" v-for="goods in order.list" :key="goods.id">
                    <image :src="goods.remark"></image>
                    <view class="good_name">
                      <text>{{ goods.name }} </text>
                      <text class="price">￥{{ goods.vipPrice }} </text>
                      <text>×{{ goods.number }}</text>
                    </view>
                  </view>

                  <view class="info">
                    <view class="left">
                      <view>订单编号：{{ order.id }}</view>
                      <view>下单时间：{{ order.createTime }}</view>
                    </view>
                    <view class="right">￥{{ order.totalPrice }}</view>
                  </view>
                </navigator>
                <view class="action">
                  <view v-if="order.state == 0" @tap="pay(order.orderId, order.state)" class="button button_pay"
                    hover-class="none">去支付</view>
                  <view v-if="order.state == 0" @tap="deleteOrder(order.orderId)" class="button button_del"
                    hover-class="none">
                    删除</view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
    <view style="height: 120rpx"> </view>
  </view>
</template>

<script>
import { getOrders } from "@/api";

export default {
  data() {
    return {
      tabIndex: 0,
      orderMenuIndex: 0,
      orders: [],
      pageNum: 1,
      pageSize: 10,
      total: 0
    };
  },
  async onLoad() {
    this.getData();
  },
  onShow() { },
  computed: {},
  methods: {
    handleScroll() {
      if (this.total > this.orders.length) {
        this.pageNum = this.pageNum + 1;
        this.getData()
      } else {
        uni.showToast({
          title: '没有更多了',
          duration: 2000,
          icon: "none"
        });
      }
    },
    jump_detail(id) {
      uni.navigateTo({
        url: "/pages/order/detail?id=" + id,
      });
    },
    async getData() {
      let res = await getOrders({
        status: this.tabIndex + 1,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      });
      if (res.code === 200) {
        this.orders = res.data.orders.map(item => {
          return {
            ...item.productOrder, list: item.list
          }
        });

        this.total = res.data.total;
      }
    },
    //切换历史订单或当前订单
    switchTab(index) {
      this.tabIndex = index;
      this.getData();
    },
    handleSwiperItemChange() {
      //禁止手动滑动
      return true;
    },
    //切换店内订单或外卖订单
    async switchMenuTab(index) { },
    //获取当前订单
    getOrders(index) { },
    deleteOrder(id) { },
    //跳转到下单页面
    zlyd() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    pay(id, payment_state) {
      if (payment_state == 0) {
        uni.navigateTo({
          url: "../pay/pay?id=" + id,
        });
      }
    },
    async verifyToken() { },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f6f6f6;
}

.navbar {
  height: calc(44px + var(--status-bar-height));
  /* #ifdef H5 */
  height: 44px;
  /* #endif */
  display: flex;
  background-color: #ffffff;
}

.talk-btn {
  height: 32px;
  margin-left: 10px;
  margin-top: 26px;
  /* #ifdef H5 */
  margin-top: 6px;
  /* #endif */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $font-size-sm !important;
  padding: 0 20rpx;
  border-radius: 50rem !important;

  image {
    width: 40rpx;
    height: 40rpx;
    margin-right: $spacing-row-sm;
  }
}

.tabbar {
  /* #ifdef MP-WEIXIN */
  margin-top: 60px;
  /* #endif */

  height: 100rpx;
  background-color: $bg-color-white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  // margin-top: 100rpx;

  .item {
    height: 100%;
    font-size: $font-size-lg;
    color: $text-color-assist;
    font-weight: 400 !important;
    display: flex;
    align-items: center;

    &.active {
      color: $text-color-base;
      border-bottom: 4rpx solid $text-color-base;
    }
  }
}

.swiper {
  width: 100%;
  height: calc(100vh - 44px);
  /* #ifdef H5 */
  height: calc(100vh - 100px);
  /* #endif */
}

.no-order-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  image {
    width: 300rpx;
    height: 300rpx;
    margin-bottom: 50rpx;
  }

  .tips {
    color: $text-color-assist;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2rem !important;
    margin-bottom: 70rpx;
  }

  button {
    width: 50%;
  }
}

.history-order {
  width: 100%;
  height: 100%;
  position: relative;

  .menu {
    padding: 18rpx 30rpx;
    display: flex;
    align-items: center;
    font-size: $font-size-base;
    color: $text-color-grey;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;

    .item {
      padding: 14rpx 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }

      &.active {
        color: $color-primary;
        background-color: $bg-color-white;
      }
    }
  }

  .history-order-swiper {
    width: 100%;
    height: 100%;
  }
}

.store-order-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: $font-size-base;
  color: $text-color-assist;
  line-height: 1.3rem !important;

  image {
    width: 400rpx;
    height: 333rpx;
    margin-bottom: 40rpx;
  }
}

.orders-scroll {
  width: 100%;
  height: 100%;
  padding-top: 104rpx;
}

.orders-scroll1 {
  width: 100%;
  height: 100%;
  padding-top: 10rpx;
}

.good_name {
  padding-left: 30rpx;
  color: #555;
  font-weight: 600;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-flow: column nowrap;

  text {
    line-height: 30rpx;
  }

  .price {
    color: #f56c6c;
    font-weight: normal;
    font-size: 24rpx;
  }
}

.order-list {
  display: flex;
  width: 100%;
  flex-direction: column;

  .order {
    background-color: $bg-color-white;
    padding: 30rpx 40rpx;
    margin-bottom: 18rpx;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .status {
        font-size: $font-size-base;
        color: $text-color-grey;
        display: flex;
        align-items: center;

        image {
          width: 30rpx;
          height: 30rpx;
          margin-left: $spacing-row-sm;
        }
      }
    }

    .images {
      display: flex;
      padding: 30rpx 0;

      image {
        flex-shrink: 0;
        width: 150rpx;
        height: 112.5rpx;
      }
    }

    .info {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      .left {
        flex: 1;
        display: flex;
        flex-direction: column;
        font-size: $font-size-base;
        color: $text-color-grey;

        >view {
          margin-bottom: 10rpx;
          font-size: 0.8rem;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      .right {
        font-size: $font-size-lg;
        color: $text-color-base;
      }
    }

    .action {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      button {
        margin-left: 30rpx;
        font-size: $font-size-sm;
      }
    }
  }

  .button {
    margin-left: 30rpx;
    padding: 15rpx 20rpx;
    font-size: $font-size-sm;
    border-radius: 70rpx;
    background-color: #eee;

    &_pay {
      background-color: #dba871;
      color: white;
      border: none;
      border-radius: 70rpx;
    }

    &_del {
      color: white;
      background-color: #f56c6c;
    }

    &_re {
      color: white;
      background-color: #5cb87a;
    }
  }
}
</style>
